<template>
  <div class="DetailParamsInfo">
    <div class="line"></div>
   <p class="k">{{itemParams.rule.key}}:</p>
    <table v-for="item in itemParams.rule.tables" relus="all">

       <tr v-for="trItem in item">
           <td v-for="tdItem in trItem">
            <p>{{tdItem}}</p>
          </td>
       </tr>
    </table>
   <p class="disclaimer">{{itemParams.rule.disclaimer}}</p>


    <div v-for="item in itemParams.info.images" class="paramsImg">
      <img :src="item" alt="" @load="DetailParamsInfoImgLoad">
    </div>

    <h4>{{itemParams.info.key}} :</h4>
    <div v-for="item in itemParams.info.set" class="info">
       <span>{{item.key}}</span>   <span class="value">{{item.value}}</span>
    </div>



  </div>
</template>

<script>
  export default {
    name:'DetailParamsInfo',
     props:{
         itemParams:{
              type:Object,
              default(){
                return {}
              }
         }

     },
     methods:{
       DetailParamsInfoImgLoad(){
        this.$emit('DetailParamsInfoImgLoad')

       }

     }
  }
</script>

<style  scoped>
.DetailParamsInfo{
padding: 15px 6px 0px 7px;
}
.DetailParamsInfo line{
height: 2px;
background-color: rgb(241, 236, 236);
border-bottom: 2px solid rgb(228, 225, 225);
}
.DetailParamsInfo table{
width: 100%;
}
.DetailParamsInfo table tr{
border: 1px solid #be2222;
padding: 6px;
height: 40px;

}

.k,.disclaimer{
color: rgb(247, 12, 12);
padding: 10px 0px;
}
.info{
color: rgb(71, 69, 69);
padding-top: 20px;
border-bottom: 1px solid rgb(184, 182, 182);
}
.info span{
padding: 10px;
}
.value{
color: rgb(248, 12, 12);
}
.paramsImg img{
width: 100%;
}
</style>
